<!--  -->
<template>
  <div class="leftNav">
    <el-menu
      router
      :default-active="this.$route.path"
      class="el-menu-vertical-demo"
    >
      <el-menu-item index="/findMusic">
        <span slot="title">发现音乐</span>
      </el-menu-item>
      <el-menu-item index="/veido">
        <span slot="title">视频</span>
      </el-menu-item>
      <el-menu-item v-if="loginStatus == 'true'" index="/myEvent">
        <span slot="title">朋友</span>
      </el-menu-item>
      <p>我的音乐</p>
      <el-menu-item index="/myCloud">
        <span slot="title">我的音乐云盘</span>
      </el-menu-item>
      <el-menu-item v-if="userPrivatePlayList.length" index="/recommendPlay">
        <span slot="title">最近播放</span>
      </el-menu-item>
      <el-menu-item v-if="userPrivatePlayList.length > 0" index="/myCollect">
        <span slot="title">我的收藏</span>
      </el-menu-item>
      <div v-if="loginStatus == 'true'">
        <p>我创建的歌单</p>
        <el-menu-item
          v-for="(item1, index1) in createList"
          :key="index1"
          :index="'/songListPage/' + item1.id"
        >
          <span slot="title">{{ item1.name }}</span>
        </el-menu-item>
        <p>我收藏的歌单</p>
        <el-menu-item
          v-for="(item2, index2) in collectList"
          :key="index2 + 50"
          :index="'/songListPage/' + item2.id"
        >
          <span slot="title">{{ item2.name }}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";

export default {
  name: "",
  data() {
    return {
      createList: [],
      collectList: [],
    };
  },
  computed: {
    ...mapGetters("userInfo", [
      //用户歌单
      "userPrivatePlayList",
      "userinfo",
      "loginStatus",
    ]),
  },
  watch: {
    userPrivatePlayList(val) {
      if (val) {
        this.getPlayList();
      }
    },
  },
  created() {
    // this.getPlayList()
  },
  methods: {
    getPlayList() {
      this.userPrivatePlayList.forEach((item) => {
        if (item.creator.nickname === this.userinfo.nickname) {
          this.createList.push(item);
        } else {
          this.collectList.push(item);
        }
      });
    },
  },
  //获取最近播放
};
</script>

<style scoped lang='less'>
.leftNav {
  .el-menu-vertical-demo {
    /deep/.el-menu-item {
      font-size: 15px;
      color: #918b8b;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/.el-menu-item:focus,
    /deep/.el-menu-item.is-active {
      color: rgb(26, 125, 218);
      border-bottom: none;
      background-color: #f6f6f8;
    }
  }
}
p {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 12px;
  color: rgb(107, 99, 99);
}
// .el-menu span {
//   width: 100%;
//   font-size: 15px;
//   color: #918b8b;
//   font-weight: 600;
//   display: inline-block;
//   overflow: hidden;
//   text-overflow: ellipsis;
//   white-space: nowrap;
// }
</style>